
$(document).ready(function() {
  if($('textarea#id_style').length > 0)
  {
    $('textarea#id_style').hide();
    var styletxt = $('textarea#id_style').text();
    if (styletxt.trim() == '')
        styletxt = '{}';
    var style = eval('(' + styletxt + ')');
    if (!style.fillColor)
        style.fillColor = '#ee9900';
    if (!style.fillOpacity)
        style.fillOpacity = '0.4';
    if (!style.strokeColor)
        style.strokeColor = '#ee9900';
    if (!style.strokeOpacity)
        style.strokeOpacity = '1.0';
    if (!style.strokeWidth)
        style.strokeWidth = '1';
    if (!style.strokeDashstyle)
        style.strokeDashstyle = 'solid';
    if (!style.pointRadius)
        style.pointRadius = '6';
    var html = '<br/><div style="float:left;">fillColor:<br/><form><input type="text" id="fillColor" name="fillColor" value="' + style.fillColor + '" /></form><div id="fillColorPicker"></div></div>';
    html += '<div style="float:left; margin-left:20px;">fillOpacity:<br/><select class="styleinput" id="fillOpacity"><option value="0.0">0.0</option><option value="0.1">0.1</option><option value="0.2">0.2</option><option value="0.3">0.3</option><option value="0.4">0.4</option><option value="0.5">0.5</option><option value="0.6">0.6</option><option value="0.7">0.7</option><option value="0.8">0.8</option><option value="0.9">0.9</option><option value="1.0">1.0</option></select></div>';
    html += '<div style="float:left; margin-left:20px;">strokeColor:<br/><form><input type="text" id="strokeColor" name="strokeColor" value="' + style.strokeColor + '" /></form><div id="strokeColorPicker"></div></div>';
    html += '<div style="float:left; margin-left:20px;">strokeOpacity:<br/><select class="styleinput" id="strokeOpacity"><option value="0.0">0.0</option><option value="0.1">0.1</option><option value="0.2">0.2</option><option value="0.3">0.3</option><option value="0.4">0.4</option><option value="0.5">0.5</option><option value="0.6">0.6</option><option value="0.7">0.7</option><option value="0.8">0.8</option><option value="0.9">0.9</option><option value="1.0">1.0</option></select></div>';
    html += '<div style="float:left; margin-left:20px;">strokeWidth:<br/><select class="styleinput" id="strokeWidth"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div>';
    html += '<div style="float:left; margin-left:20px;">strokeDashstyle:<br/><select id="strokeDashstyle" class="styleinput"><option value="dot">dot</option><option value="dash">dash</option><option value="dashdot">dashdot</option><option value="longdash">longdash</option><option value="longdashdot">longdashdot</option><option value="solid">solid</option></select></div>';
    html += '<div style="float:left; margin-left:20px;">pointRadius:<br/><select class="styleinput" id="pointRadius"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div>';
    
    $('textarea#id_style').after(html);
    
    fillColorPicker = $.farbtastic('#fillColorPicker', function(color) {
        $('#fillColor').val(color);
        $('#fillColor').css('background-color', color);
        style.fillColor = color;
        $('textarea#id_style').text(JSON.stringify(style));
    });
    
    strokeColorPicker = $.farbtastic('#strokeColorPicker', function(color) {
        $('#strokeColor').val(color);
        $('#strokeColor').css('background-color', color);
        style.strokeColor = color;
        $('textarea#id_style').text(JSON.stringify(style));
    });

    fillColorPicker.setColor(style.fillColor);
    strokeColorPicker.setColor(style.strokeColor);
    $('#strokeDashstyle').attr('value', style.strokeDashstyle);
    $('#fillOpacity').attr('value', style.fillOpacity);
    $('#strokeOpacity').attr('value', style.strokeOpacity);
    $('#strokeWidth').attr('value', style.strokeWidth);
    $('#pointRadius').attr('value', style.pointRadius);

    $('#fillColor').change(function (){
        fillColorPicker.setColor($(this).val());
    });
    $('#strokeColor').change(function (){
        strokeColorPicker.setColor($(this).val());
    });

    $('.styleinput').change(function (){
        style[$(this).attr('id')] = $(this).val();
        $('textarea#id_style').text(JSON.stringify(style));
    });
  
  }
});
